<template>
    <div class="help_box">
        <div class="left">
            <h1 class="themo">帮助文档</h1>
            <div
                    @click="doc_change(_i)"
                    :id="'joker'+_i.id"
                    v-for="_i in doc_arr"
                    :class="class_watch(_i)"
                    :key="_i.id"
            >{{_i.name}}</div>
        </div>
        <div class="right">
            <div v-if="doc_arr" class="right_til">
                <span v-if="dq_doc" class="til">{{dq_doc.name}}</span>
                <template v-if="doc_arr">
                    <el-select
                            @change="search_doc"
                            clearable
                            filterable
                            class="search"
                            placeholder="请输入内容"
                            v-model="search"
                    >
                        <el-option v-for="_i in doc_arr" :key="_i.id" :label="_i.name" :value="_i.id"></el-option>
                    </el-select>
                </template>
            </div>
            <div v-if="dq_doc" class="doc_read ql-editor" v-html="dq_doc.content"></div>
        </div>
    </div>
</template>

<script>
    import application from "@/utils/api/application.js";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    export default {
        name: "helps",
        data() {
            return {
                doc_arr: [], // 所有文档集合
                dq_doc: {
                    content: null,
                    id: null,
                    level: null,
                    name: null,
                    status: 1
                }, // 当前显示文档
                search: null // 文档查询关键字
            };
        },
        methods: {
            // 文档搜索函数
            search_doc(v) {
                try {
                    document.querySelector("#joker" + v).scrollIntoView(true);
                } catch (err) {
                    console.log(err);
                }
                this.doc_arr.map(_i => {
                    if (_i.id == v) {
                        this.dq_doc = _i;
                        return;
                    }
                });
            },
            // 文档状态追判断函数
            class_watch(obj) {
                let str = "";
                if (obj.id == this.dq_doc.id) {
                    str += "doc_active ";
                }
                if (obj.level == 1) {
                    str += " one_title";
                }
                if (obj.level == 2) {
                    str += " two_title";
                }
                if (obj.level == 3) {
                    str += " three_title";
                }
                if (obj.level == 4) {
                    str += " four_title";
                }
                return str;
            },
            // 文档目录点击函数
            doc_change(obj) {
                this.dq_doc = obj;
            },
            // 文档目录筛选函数
            doc_screen(arr) {
                let _arr = [];
                arr.map(_i => {
                    if (_i.status == 1) {
                        _arr.push({
                            content: _i.content,
                            createName: _i.createName,
                            createdTime: _i.createdTime,
                            id: _i.id,
                            level: _i.level,
                            name: _i.name,
                            parent: _i.parent,
                            status: _i.status,
                            updateTime: _i.updateTime
                        });
                        let _arrChildren = this.doc_screen(_i.children);
                        _arr = [..._arr,..._arrChildren];
                    }
                });
                return _arr;
            },
            // 数据结构层次化函数
            tree_data(arr, level = 1, id = 0) {
                let tree_arr = [];
                let box_arr = [];
                arr.map(_i => {
                    if (_i.level > level) {
                        tree_arr.push(_i);
                    }
                    if (_i.level == level && _i.parent == id) {
                        box_arr.push(_i);
                    }
                });
                box_arr.map(_i => {
                    _i.children = this.tree_data(tree_arr, level + 1, _i.id);
                });
                return box_arr;
            },
            // 数据请求函数
            async query() {
                let res = await application.document_list({});
                if (res&&res.success) {
                    let _resList = this.tree_data(res.value.list);
                    this.doc_arr = this.doc_screen(_resList);
                    this.search = this.doc_arr.id;
                    this.dq_doc = this.doc_arr[0];
                }
            }
        },
        async created() {
            this.query();
        }
    };
</script>

<style scoped lang='scss'>
    .themo {
        font-family: "Arial Normal", "Arial";
        font-weight: 500;
        font-style: normal;
        font-size: 24px;
        color: #303133;
        text-indent: 12px;
    }
    .doc_active {
        font-weight: 600 !important;
        color: #01b27a !important;
    }
    .one_title,
    .two_title,
    .three_title,
    .four_title {
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-style: normal;
        line-height: 36px;
        letter-spacing: 1px;
    }
    .one_title:hover,
    .two_title:hover,
    .four_title:hover,
    .three_title:hover {
        color: #01b27a;
        font-weight: 600;
    }
    .one_title {
        font-weight: 500;
        font-size: 16px;
        color: #808695;
        text-indent: 12px;
        cursor: pointer;
    }
    .two_title {
        font-weight: 500;
        font-size: 14px;
        color: #515a6e;
        text-indent: 28px;
        cursor: pointer;
    }
    .three_title {
        font-weight: 500;
        font-size: 10px;
        color: #515a6e;
        text-indent: 42px;
        cursor: pointer;
    }
    .four_title {
        font-weight: 500;
        font-size: 10px;
        color: #515a6e;
        text-indent: 58px;
        cursor: pointer;
    }
    .help_box::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }
    .help_box {
        box-sizing: border-box;
        height: calc(100vh - 80px);
        width: 86%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        .left {
            height: 100%;
            width: 12%;
            min-width: 180px;
            max-width: 240px;
            overflow-y: scroll;
            border-right: 2px solid #dcdfe6;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE 10+ */
            h1 {
                margin: 10px auto 10px;
            }
        }
        .left::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
        .right {
            height: 100%;
            overflow-y: scroll;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE 10+ */
            flex: 1;
            .right_til {
                width: 99%;
                margin: 0 auto;
                height: 60px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .til {
                    text-indent: 28px;
                    letter-spacing: 1px;
                    font-size: 26px;
                    font-weight: 400;
                }
                .search {
                    width: 300px;
                    transform: scale(1, 0.8);
                }
            }
            .doc_read {
                width: 90%;
                margin: 6px auto;
            }
        }
        .right::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
    }
</style>
